﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位发布登记</title>
    <!-- 引入Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <!-- 引入Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qs@6.10.3/dist/qs.min.js"></script>

    <style scoped>
        .position-register {
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            
        }

        .breadcrumb {
            margin-bottom: 15px;
            font-size: 14px;
            color: #666;
        }

        .action-buttons {
            margin-bottom: 20px;
            text-align: right;
        }

        .register-form {
            max-width: 1200px;
            margin: 0 auto;
        }

        .textarea-input {
            width: 100%;
        }

        .el-form-item {
            margin-bottom: 15px;
        }

        .el-row {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="position-register">
            <div class="breadcrumb">
                <span>您正在做的业务是：</span>
                <span>人力资源 > 招聘管理 > 职位发布管理 > 职位发布登记</span>
            </div>

            <div class="action-buttons">
                <el-button type="primary" v-on:click="handleSubmit">提交</el-button>
                <el-button v-on:click="handleReset">清除</el-button>
            </div>

            <el-form :model="formData"
                     ref="formRef"
                     label-width="80px"
                     class="register-form"
                     :rules="rules">
                <!-- 第一行表单 -->
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="I-III级机构" prop="firstKindId">
                            <el-cascader v-model="selectedCascaderValue"
                                         :options="cascaderOptions"
                                         :props="cascaderProps"
                                         v-on:change="handleCascaderChange"
                                         placeholder="请选择机构"
                                         :loading="isLoading" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="招聘类型" prop="engageType">
                            <el-select v-model="formData.engageType"
                                       placeholder="--请选择--">
                                <el-option value="" label="--请选择--"></el-option>
                                <el-option value="校园招聘" label="校园招聘"></el-option>
                                <el-option value="社会招聘" label="社会招聘"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第二行表单 -->
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="职位分类及名称" prop="majorId">
                            <el-cascader v-model="selectedJobValue"
                                         :options="jobCascaderOptions"
                                         :props="jobCascaderProps"
                                         v-on:change="handleJobChange"
                                         placeholder="请选择职位分类及名称"
                                         :loading="jobLoading" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="招聘人数" prop="humanAmount">
                            <el-input v-model.number="formData.humanAmount"
                                      placeholder="请填写招聘人数"
                                      :disabled="!formData.majorId"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="截止日期" prop="dateStart">
                            <el-date-picker v-model="formData.dateStart"
                                            type="date"
                                            placeholder="请选择截止日期"
                                            :disabled="!formData.majorId"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第三行表单 -->
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="登记人">
                            <el-input v-model="formData.register"
                                      placeholder="登记人"
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="登记时间">
                            <el-input v-model="formData.registTime"
                                      placeholder="登记时间"
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 职位描述和招聘要求 -->
                <el-form-item label="职位描述" prop="majorDescribe">
                    <el-input type="textarea"
                              v-model="formData.majorDescribe"
                              :rows="4"
                              placeholder="请输入职位描述"
                              class="textarea-input"></el-input>
                </el-form-item>

                <el-form-item label="招聘要求" prop="engage_required">
                    <el-input type="textarea"
                              v-model="formData.engage_required"
                              :rows="4"
                              placeholder="请输入招聘要求"
                              class="textarea-input"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <script type="text/javascript">
        const { createApp, ref, reactive, computed, onMounted } = Vue;
        const { ElMessage } = ElementPlus;

        const app = createApp({
            setup() {
                // 机构级联选择器
                const selectedCascaderValue = ref([]);
                const cascaderOptions = ref([]);
                const cascaderProps = ref({
                    value: 'value',
                    label: 'label',
                    children: 'children'
                });
                const isLoading = ref(false);

                // 职位级联选择器
                const selectedJobValue = ref([]);
                const jobCascaderOptions = ref([]);
                const jobCascaderProps = ref({
                    value: 'value',
                    label: 'label',
                    children: 'children'
                });
                const jobLoading = ref(false);
                console.log("数据",cascaderOptions)
                // 加载机构级联数据
                        // 加载机构级联数据
        const loadOrganizationCascaderData = async () => {
            isLoading.value = true;
            try {
                console.log('开始请求机构级联数据...');
                const response = await axios.get('/Text/GetJobCascaderData');

                console.log('API响应状态:', response.status);
                console.log('API响应数据:', response.data);

                if (response.status === 200) {
                    if (Array.isArray(response.data) && response.data.length > 0) {
                        cascaderOptions.value = response.data;
                        console.log('成功加载机构级联数据，共', response.data.length, '项');
                    } else {
                        console.warn('API返回空数据');
                        ElMessage.warning('没有找到机构数据');
                    }
                } else {
                    throw new Error(`API请求失败，状态码: ${response.status}`);
                }
            } catch (error) {
                console.error('加载机构数据错误:', error);
                ElMessage.error('加载机构数据失败，请稍后再试');
            } finally {
                isLoading.value = false;
            }
        };

                // 加载职位级联数据
                const loadJobCascaderData = async () => {
                    jobLoading.value = true;
                    try {
                        const response = await axios.get('/engage/GetJobCascaderData');
                        if (response.status === 200 && response.data) {
                            jobCascaderOptions.value = response.data;
                        } else {
                            throw new Error(response.data?.message || '获取职位数据失败');
                        }
                    } catch (error) {
                        console.error('加载职位数据错误:', error);
                        ElMessage.error('加载职位数据失败，请稍后再试');
                        // 设置默认数据
                        jobCascaderOptions.value = [
                            {
                                value: '01',
                                label: '销售类',
                                children: [
                                    { value: '0101', label: '销售经理' },
                                    { value: '0102', label: '销售代表' }
                                ]
                            },
                            {
                                value: '02',
                                label: '技术类',
                                children: [
                                    { value: '0201', label: '前端开发' },
                                    { value: '0202', label: '后端开发' }
                                ]
                            }
                        ];
                    } finally {
                        jobLoading.value = false;
                    }
                };

                // 机构级联选择变化处理
                const handleCascaderChange = (value) => {
                    // 重置机构信息
                    formData.firstKindId = '';
                    formData.firstKindName = '';
                    formData.secondKindId = '';
                    formData.secondKindName = '';
                    formData.thirdKindId = '';
                    formData.thirdKindName = '';

                    if (!value || value.length === 0) return;

                    // 处理一级机构
                    if (value.length >= 1) {
                        const firstLevel = cascaderOptions.value.find(c => c.value === value[0]);
                        if (firstLevel) {
                            formData.firstKindId = firstLevel.value.toString();
                            formData.firstKindName = firstLevel.label;

                            // 处理二级机构
                            if (value.length >= 2) {
                                const secondLevel = firstLevel.children.find(c => c.value === value[1]);
                                if (secondLevel) {
                                    formData.secondKindId = secondLevel.value.toString();
                                    formData.secondKindName = secondLevel.label;

                                    // 处理三级机构
                                    if (value.length >= 3) {
                                        const thirdLevel = secondLevel.children.find(c => c.value === value[2]);
                                        if (thirdLevel) {
                                            formData.thirdKindId = thirdLevel.value.toString();
                                            formData.thirdKindName = thirdLevel.label;
                                        }
                                    }
                                }
                            }
                        }
                    }
                };

                // 职位级联选择变化处理
                const handleJobChange = (value) => {
                    // 重置职位信息
                    formData.majorKindId = '';
                    formData.majorKindName = '';
                    formData.majorId = '';
                    formData.majorName = '';

                    if (!value || value.length === 0) return;

                    // 处理职位分类
                    if (value.length >= 1) {
                        const category = jobCascaderOptions.value.find(c => c.value === value[0]);
                        if (category) {
                            formData.majorKindId = category.value;
                            formData.majorKindName = category.label;

                            // 处理具体职位
                            if (value.length >= 2) {
                                const job = category.children.find(j => j.value === value[1]);
                                if (job) {
                                    formData.majorId = job.value;
                                    formData.majorName = job.label;
                                }
                            }
                        }
                    }
                };

                // 表单引用
                const formRef = ref(null);

                // 表单数据
                const formData = reactive({
                    firstKindId: '',        // 一级机构ID
                    firstKindName: '',      // 一级机构名称
                    secondKindId: '',       // 二级机构ID
                    secondKindName: '',     // 二级机构名称
                    thirdKindId: '',        // 三级机构ID
                    thirdKindName: '',      // 三级机构名称
                    engageType: '',         // 招聘类型
                    majorKindId: '',        // 职位分类ID
                    majorId: '',            // 职位ID
                    majorName: '',          // 职位名称
                    humanAmount: null,      // 招聘人数
                    dateStart: null,        // 截止日期
                    register: 'zhangsan',   // 登记人
                    registTime: '',         // 登记时间
                    majorDescribe: '',      // 职位描述
                    engage_required: '',    // 招聘要求
                    name: ''
                });

                // 表单验证规则
                const rules = reactive({
                    firstKindId: [
                        { required: true, message: '请选择I级机构', trigger: 'change' }
                    ],
                    engageType: [
                        { required: true, message: '请选择招聘类型', trigger: 'change' }
                    ],
                    majorKindId: [
                        { required: true, message: '请选择职位分类', trigger: 'change' }
                    ],
                    majorId: [
                        { required: true, message: '请选择职位名称', trigger: 'change' }
                    ],
                    humanAmount: [
                        { required: true, message: '请填写招聘人数', trigger: 'blur' },
                        { type: 'number', message: '招聘人数必须为数字', trigger: 'blur' }
                    ],
                    dateStart: [
                        { required: true, message: '请选择截止日期', trigger: 'change' }
                    ]
                });

                // 当前时间
                const currentTime = computed(() => {
                    const now = new Date();
                    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
                });

                // 计时器更新时间
                const tick = () => {
                    formData.registTime = currentTime.value;
                    setTimeout(tick, 1000);
                };

                // 提交表单
                const handleSubmit = () => {
                    formRef.value.validate((valid) => {
                        if (valid) {
                            // 关键字段校验
                            if (!formData.firstKindId) {
                                ElMessage.warning("请选择I级机构");
                                return;
                            }

                            const requestData = {
                                first_kind_id: parseInt(formData.firstKindId) || 0,
                                first_kind_name: formData.firstKindName,
                                second_kind_id: parseInt(formData.secondKindId) || 0,
                                second_kind_name: formData.secondKindName,
                                third_kind_id: parseInt(formData.thirdKindId) || 0,
                                third_kind_name: formData.thirdKindName || "",
                                major_kind_id: parseInt(formData.majorKindId) || 0,
                                major_kind_name: formData.majorKindName || "",
                                major_id: parseInt(formData.majorId) || 0,
                                major_name: formData.majorName,
                                human_amount: formData.humanAmount || 0,
                                engage_type: formData.engageType,
                                deadline: formData.dateStart,
                                register: formData.register,
                                changer: "zhangsan",
                                regist_time: new Date().toISOString().split('T')[0],
                                change_time: new Date().toISOString().split('T')[0],
                                major_describe: formData.majorDescribe,
                                engage_required: formData.engage_required,
                                name: ""
                            };

                            console.log("请求数据:", requestData);

                            axios.post(
                                "/Text/insert",
                                requestData,
                                { headers: { "Content-Type": "application/json" } }
                            )
                            .then((response) => {
                                console.log("响应数据:", response.data);
                                ElMessage.success("提交成功");
                                handleReset();
                            })
                            .catch((error) => {
                                console.error("错误:", error.response || error);
                                ElMessage.error("提交失败：" + (error.response?.data?.message || error.message));
                            });
                        }
                    });
                };

                // 重置表单
                const handleReset = () => {
                    formRef.value.resetFields();
                    selectedCascaderValue.value = [];
                    selectedJobValue.value = [];

                    // 重置所有相关字段
                    formData.firstKindId = '';
                    formData.firstKindName = '';
                    formData.secondKindId = '';
                    formData.secondKindName = '';
                    formData.thirdKindId = '';
                    formData.thirdKindName = '';
                    formData.majorKindId = '';
                    formData.majorId = '';
                    formData.majorName = '';
                    formData.humanAmount = null;
                    formData.dateStart = null;
                };

                // 初始化时间和加载数据
                onMounted(() => {
                    tick();
                    loadOrganizationCascaderData();
                    loadJobCascaderData();
                });

                return {
                    formRef,
                    formData,
                    rules,
                    selectedCascaderValue,
                    cascaderOptions,
                    cascaderProps,
                    isLoading,
                    handleCascaderChange,
                    selectedJobValue,
                    jobCascaderOptions,
                    jobCascaderProps,
                    jobLoading,
                    handleJobChange,
                    handleSubmit,
                    handleReset
                };
            }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>